

<template>
  <div class="dataInfo">
    <h2>订单详情</h2>
    <!-- 页面内容 -->
    <el-descriptions title="用户信息" :column="3"  border>
    <el-descriptions-item label="还款人姓名">{{orderDetail.customerName}}</el-descriptions-item>
    <el-descriptions-item label="手机号">{{ orderDetail.mobile }}</el-descriptions-item>
    <el-descriptions-item label="身份证号码">{{ orderDetail.idCard }}</el-descriptions-item>
    <el-descriptions-item label="身份证照片">
      <image-preview :src="orderDetail.idCardFront" :width="50" :height="50" style="margin-right: 20px;"/>
      <image-preview :src="orderDetail.idCardBack" :width="50" :height="50"/>
    </el-descriptions-item>
    <el-descriptions-item label="联系地址">{{ orderDetail.address }}</el-descriptions-item>
    </el-descriptions>

    <el-descriptions title="订单信息" :column="3"  border style="margin-top: 20px;">
      <template slot="extra">
      <el-button type="primary" size="small" @click="getcollectionStatus" v-hasPermi="['business:order:update']">催款成功</el-button>
      <el-button type="primary" size="small" @click="getupdateStatus" v-hasPermi="['business:order:update']">修改订单状态</el-button>
    </template>
    <el-descriptions-item label="租户编号">{{ orderDetail.tenantId }}</el-descriptions-item>
    <el-descriptions-item label="产品名称">{{ orderDetail.productName }}</el-descriptions-item>
    <el-descriptions-item label="甲方订单编号">{{orderDetail.outOrderNo}}</el-descriptions-item>
    <el-descriptions-item label="订单状态">
      <el-tag :type=" orderDetail.orderStatus==0?
        'info':orderDetail.collectionStatus==1?
        '':orderDetail.collectionStatus==2?
        'danger':'success'">
        {{ orderDetail.orderStatus==0?
        '待还款':orderDetail.orderStatus==1?
        '部分还款':orderDetail.orderStatus==2?
        '已逾期':'已结清' }}
        </el-tag>
    </el-descriptions-item>
    <el-descriptions-item label="催收状态">
      <el-tag :type=" orderDetail.collectionStatus==0?
        'info':orderDetail.collectionStatus==1?
        '':orderDetail.collectionStatus==2?
        'warning':orderDetail.collectionStatus==3
        ?'success':'danger'">
        {{ orderDetail.collectionStatus==0?
        '待催收':orderDetail.collectionStatus==1?
        '催收中':orderDetail.collectionStatus==2?
        '承诺还款':orderDetail.collectionStatus==3
        ?'催收成功':'催收失败' }}
      </el-tag>

    </el-descriptions-item>
    <el-descriptions-item label="订单总金额">{{ orderDetail.totalAmount }}</el-descriptions-item>
    <el-descriptions-item label="订单总期数">{{ orderDetail.totalPeriods }}</el-descriptions-item>
    <el-descriptions-item label="未还款金额">{{ orderDetail.unpaidAmount }}</el-descriptions-item>
    <el-descriptions-item label="未还款期数">{{ orderDetail.unpaidPeriods }}</el-descriptions-item>
    <el-descriptions-item label="已还款金额">{{ orderDetail.repaidAmount }}</el-descriptions-item>
    <el-descriptions-item label="已还款期数">{{ orderDetail.repaidPeriods }}</el-descriptions-item>
    <el-descriptions-item label="结清金额">{{ orderDetail.settlementAmount }}</el-descriptions-item>
    <el-descriptions-item label="催收次数">{{ orderDetail.collectionTimes }}</el-descriptions-item>
    <el-descriptions-item label="最后催收时间">{{ orderDetail.lastCollectionTime }}</el-descriptions-item>
    <el-descriptions-item label="逾期天数">{{ orderDetail.overdueDays }}</el-descriptions-item>
    <el-descriptions-item label="逾期天数">{{ orderDetail.overdueDays }}</el-descriptions-item>
    <el-descriptions-item label="催收备注">{{ orderDetail.collectionRemark }}</el-descriptions-item>
    <el-descriptions-item label="备注">{{ orderDetail.remark }}</el-descriptions-item>
    <el-descriptions-item label="风控报告地址">
    <span @click="getFile(orderDetail.riskReportUrl)" style="color: #1890ff; cursor: pointer;">
      {{ orderDetail.riskReportUrl.toLowerCase().endsWith('.pdf') ? '预览' : '下载' }}
    </span>
  </el-descriptions-item>
    <el-descriptions-item label="合同地址">
      <span @click="getFile(orderDetail.contractUrl)" style="color: #1890ff; cursor: pointer;">
      {{ orderDetail.contractUrl.toLowerCase().endsWith('.pdf') ? '预览' : '下载' }}
    </span></el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="产品信息" style="margin-top: 20px;" :column="3"  border>
      <el-descriptions-item label="产品名称">{{getShow(orderDetail.productInfo.productName)}}</el-descriptions-item>
      <el-descriptions-item label="产品规格">{{getShow(orderDetail.productInfo.productSpecs)}}</el-descriptions-item>
      <el-descriptions-item label="产品价格">{{getShow(orderDetail.productInfo.productPrice)}}</el-descriptions-item>
      <el-descriptions-item label="产品图片">
        <image-preview :src="orderDetail.productInfo.productImg" :width="50" :height="50" v-if="orderDetail.productInfo.productImg"/>
        <div v-else>暂无图片</div>
      </el-descriptions-item>
      <el-descriptions-item label="总期数">{{getShow(orderDetail.productInfo.totalPeriods)}}</el-descriptions-item>
      <el-descriptions-item label="总期数">{{getShow(orderDetail.productInfo.totalPeriods)}}</el-descriptions-item>
      <el-descriptions-item label="总期数">{{getShow(orderDetail.productInfo.totalAmount)}}</el-descriptions-item>
      <el-descriptions-item label="期数类型">{{getShow(orderDetail.productInfo.periodsType)}}</el-descriptions-item>
      <el-descriptions-item label="每期还款金额">{{getShow(orderDetail.productInfo.periodsPayment)}}</el-descriptions-item>
      <el-descriptions-item label="首付期数">{{getShow(orderDetail.productInfo.firstPeriods)}}</el-descriptions-item>
      <el-descriptions-item label="首付金额">{{getShow(orderDetail.productInfo.firstAmount)}}</el-descriptions-item>

    </el-descriptions>
    <el-descriptions title="还款计划信息" style="margin-top: 20px;" :column="3"  border>
      
    </el-descriptions>
    <!-- {{ orderDetail.repaymentPlan }} -->
    <el-table
      :data="orderDetail.repaymentPlan.periods"
      style="width: 100%" 
      height="500"
      >
      <el-table-column
        prop="periodNo"
        label="期数"
        width="180">
      </el-table-column>
      <el-table-column
        prop="dueDate"
        label="应还日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="totalAmount"
        label="应还总额">
      </el-table-column>
      <el-table-column
        prop="status"
        label="还款状态">
      </el-table-column>
      <el-table-column
        prop="actualPaymentDate"
        label="实际还款日期">
      </el-table-column>
      <el-table-column
        prop="actualPaymentAmount"
        label="实际还款金额">
      </el-table-column>
      <el-table-column
        prop="overdueDays"
        label="逾期天数">
      </el-table-column>
      <el-table-column
        prop="overdueAmount"
        label="逾期金额">
      </el-table-column>
    </el-table>
  <!-- {{ orderDetail }} -->

  <el-dialog
  title="催款成功"
  :visible.sync="dialogVisible"
  width="30%"
 >
  <el-form ref="formInline" :model="formInline" :rules="Inlinerules" label-width="120px" class="demo-form-inline">
        <el-form-item label="结算金额" prop="settlementAmount">
          <el-input v-model="formInline.settlementAmount" placeholder="请输入结算金额" ></el-input>
        </el-form-item>
        <el-form-item label="备注"  prop="remark">
          <el-input v-model="formInline.remark" placeholder="请输入备注"  type="textarea"></el-input>
        </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="sure">确 定</el-button>
  </span>
</el-dialog>
<el-dialog
  title="修改催款状态"
  :visible.sync="dialog"
  width="30%"
  >
  <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="demo-form-inline">
        <el-form-item label="催款状态" prop="status">
          <el-select v-model="form.status" placeholder="请选择"  style="width: 100%;">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="催款备注"  prop="collectionRemark">
          <el-input v-model="form.collectionRemark " placeholder="请输入催款备注"  type="textarea"></el-input>
        </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialog = false">取 消</el-button>
    <el-button type="primary" @click="call">确 定</el-button>
  </span>
</el-dialog>
  </div>



</template>
<script>

import {  getOrder,collectionStatus,updateStatus } from "@/api/business";


export default {
  data() {
    return {
      orderDetail: null,
      id:null,
      dialogVisible:false,
      dialog:false,
      formInline:{},
      form:{},
      statusList:[
      {
          label: '待催收',
          value: 0
        },
        {
          label: '催收中',
          value: 1
        },
        {
          label: '承诺还款',
          value: 2
        },
        // {
        //   label: '催收成功',
        //   value: 3
        // },
        {
          label: '催收失败',
          value: 4
        }
      ],
      rules:{
        status: [
          {required: true, message: "催款状态必选", trigger: "change"}
        ],
        remark: [
          {required: true, message: "催收备注不能为空", trigger: "change"}
        ],
      },
      Inlinerules:{
        settlementAmount: [
          {required: true, message: "结算金额不能为空", trigger: "change"}
        ],
        remark: [
          {required: true, message: "备注不能为空", trigger: "change"}
        ],
      }
    };
  },
  created() {
    this.fetchOrderDetail();
  },
  methods: {
    async fetchOrderDetail() {
      this.id = this.$route.query.id;
      console.log('订单ID:', this.id)
      try {
        const response = await getOrder(this.id);
        this.orderDetail = response.data;
        this.orderDetail.productInfo=JSON.parse(this.orderDetail.productInfo)
        this.orderDetail.repaymentPlan=JSON.parse(this.orderDetail.repaymentPlan)

      } catch (error) {
        console.error('获取订单详情失败', error);
      }
    },
    getFile(url) {
  // 检查文件后缀是否是 pdf
  const isPDF = url.toLowerCase().endsWith('.pdf');

  if (isPDF) {
    // 如果是 PDF，进行预览
    this.previewPDF(url);
  } else {
    // 如果不是 PDF，进行下载
    this.downloadFile(url);
  }
},
previewPDF(url) {
  window.open(url, '_blank');
},

downloadFile(url) {
  const a = document.createElement('a');
  a.href = url;
  a.download = url.split('/').pop();
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
},
getcollectionStatus(){
  this.dialogVisible=true
  this.formInline={
    id:this.id
  }
},
getupdateStatus(){
  this.dialog=true
  this.form={
    id:this.id
  }
},
sure(){

  this.$refs["formInline"].validate(valid => {
        if (valid) {
          collectionStatus(this.formInline).then(res => {
            this.$modal.msgSuccess("修改成功");
            this.dialogVisible = false;
            this.fetchOrderDetail();
          })
        }
      });
},
call(){
  this.$refs["form"].validate(valid => {
        if (valid) {
          updateStatus(this.form).then(res => {
            this.$modal.msgSuccess("修改成功");
            this.dialog = false;
            this.fetchOrderDetail();
          })
        }
      });
},
getShow(data){
  return data? data:'-'
}
  }
}
</script>

<style lang="scss" scoped>
.dataInfo{
  padding: 10px;
  h2{
    font-weight: 700;
    line-height: 0.5;
    text-align: center;
  }
}
</style>
